<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                template="./../../template/templateSGPF.xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

    <ui:define name="corpo da página">
        <script>
            function decideMessage(value) {
                if (value) {
                    if (value.dialogConfimation === 'salvar') {
                        PF('save').show();
                    }
                    if (value.dialogConfimation === 'update') {
                        update.show();
                    }
                    if (value.dialogConfimation === 'error') {
                        error.show();
                    }
                }
            }
            function verify(value) {
                if (value.flag === "salvar") {
                    PF('confirmacao').show();
                }
                if (value.flag === "ok") {
                    PF('save').show();
                }
                if (value.flag === "nocep") {
                    PF('errorcep').show();
                }
            }

            function alteraMaiusculo(inputtext) {
                inputtext.value = inputtext.value.toUpperCase();
            }
            
            function alteraMinusculo(inputtext) {
                inputtext.value = inputtext.value.toLowerCase();
            }
        </script>

        <center><h1>#{unidadeBean.titulo} </h1></center>
        <h:form id="frmCadUnidade" prependId="false">
            <div class="row-fluid">
                <div class="pull-right">                        
                    <p:commandButton style="width: 100px;"
                                     value="Salvar"                                    
                                     icon="ui-icon-disk"
                                     oncomplete="verify(args);"
                                     action="#{unidadeBean.verificaCamposDialog()}"                                     
                                     update=":formConfirm"
                                     />
                    <p:commandButton style="width: 100px;" 
                                     icon="ui-icon-circle-close"
                                     value="Cancelar" 
                                     action="#{unidadeBean.cancelar()}"
                                     ajax="false"
                                     update=":frmCadUnidade"/>
                </div>
            </div>

            <div class="row-fluid">
                <div class="span6">
                    <div class="well-custom">

                        <div class="row-fluid" >
                            <strong for="Nome" class="font-color-green">
                                Nome<strong style="color:red">*</strong>:</strong> 
                        </div>
                        <div class="row-fluid">
                            <div class="span6">
                                <p:inputText id="txt_nome" style="width: 97%; height: 30px;"
                                             value="#{unidadeBean.unidade.nome}" 
                                             onkeyup="alteraMaiusculo(this)"
                                             />                                
                            </div>
                            <div class="span6">
                                <p:messages for="msgNome" showDetail="true" autoUpdate="true" closable="true"/>                                           
                            </div>
                        </div>

                        <div class="row-fluid" >
                            <strong for="Sigla" class="font-color-green">
                                Sigla <strong style="color:red">*</strong>:</strong> 
                        </div>
                        <div class="row-fluid">
                            <div class="span6">
                                <p:inputText id="txt_sigla" style="width: 97%; height: 30px;"
                                             value="#{unidadeBean.unidade.sigla}" 
                                             onkeyup="alteraMaiusculo(this)"
                                             />                                
                            </div>
                            <div class="span6">
                                <p:messages for="msgSigla" showDetail="true" autoUpdate="true" closable="true"/>                                           
                            </div>
                        </div>

                        <div class="row-fluid">                                       
                            <strong for="txtFone" class="font-color-green">
                                CEP:</strong>                                 
                        </div>
                        <div class="row-fluid">
                            <div class="span6">
                                <p:inputMask id="txt_cep" style="width: 46%; height: 30px; "
                                             mask="99999-999"
                                             value="#{unidadeBean.cep}"
                                             title="Digite o cep e clique em localizar para buscar um endereço."/>
                                <p:commandButton value="Localizar"
                                                 icon="ui-icon-check"
                                                 action="#{unidadeBean.encontraCEP()}"
                                                 update="frmCadUnidade"
                                                 oncomplete="verify(args);"
                                                 class="zoomIcon"
                                                 onclick="PF('statusDialog').show();"
                                                 onsuccess="PF('statusDialog').hide();"
                                                 style="margin-bottom: 10px; width: 100px; height: 30px; left: 4%"/>
                            </div>
                            <div class="span6">
                                <p:messages for="msgCEP" showDetail="true" autoUpdate="true" closable="true" />                                
                            </div>
                        </div>                                

                        <div class="row-fluid">
                            <strong for="txtNome" class="font-color-green">
                                Endereco:</strong>                                 
                        </div>
                        <div class="row-fluid">
                            <div class="span6">
                                <p:inputText id="txt_endereco" style="width: 97%; height: 30px;"
                                             value="#{unidadeBean.unidade.endereco}"
                                             />                                
                            </div>
                            <div class="span6">
                                <p:messages for="msgEndereco" showDetail="true" autoUpdate="true" closable="true"/>                                           
                            </div>
                        </div>

                        <div class="row-fluid">                                       
                            <strong for="txtFone" class="font-color-green">
                                Telefone:</strong>                                 
                            <strong for="txtFone" class="font-color-green" 
                                    style="margin-left: 15%">
                                Telefone2:</strong>                                 
                        </div>
                        <div class="row-fluid">
                            <div class="span6">
                                <p:inputMask id="txt_telefone" style="width: 47%; height: 30px; "
                                             mask="(99) 9999-9999"
                                             value="#{unidadeBean.unidade.telefone}"/>                                
                                <p:inputMask id="txt_telefone2" style="width: 47%; height: 30px; margin-left: 3%"
                                             mask="(99) 9999-9999"
                                             value="#{unidadeBean.unidade.telefone2}"/>                                
                            </div>
                            <div class="span6">
                                <p:messages for="msgIniciativa" showDetail="true" autoUpdate="true" closable="true" />                                
                            </div>
                        </div>

                    </div>                                
                </div>

                <div class="span6">
                    <div class="well-custom3">
                        <div class="row-fluid">                                       
                            <strong for="txtEstado" class="font-color-green">
                                Estado: </strong>                                 
                        </div>
                        <div class="row-fluid">
                            <div class="span6">
                                <p:autoComplete id="sloEstado" 
                                                value="#{unidadeBean.unidade.estado}" 
                                                completeMethod="#{unidadeBean.autoCompleteEstado}" 
                                                var="estado" itemLabel="#{estado.nome}  #{estado.uf}" 
                                                itemValue="#{estado}" converter="estadoConverter"
                                                style="width: 97%; height: 30px; color: blue;"
                                                >
                                    <p:column style="font-size: 17px;">
                                        #{estado.nome}
                                    </p:column>
                                </p:autoComplete>

                            </div>
                            <div class="span6">
                                <p:messages for="msgEstado" showDetail="true" autoUpdate="true" closable="true" />                                
                            </div>
                        </div>
                        <div class="row-fluid" style="margin-top: 1%">                                       
                            <strong for="txtAcao" class="font-color-green">
                                Município: </strong>                                 
                        </div>
                        <div class="row-fluid">
                            <div class="span6">
                                <p:autoComplete id="sloMunicipio" 
                                                value="#{unidadeBean.unidade.municipio}" 
                                                completeMethod="#{unidadeBean.autoCompleteMunicipio}" 
                                                var="municipio" itemLabel="#{municipio.nome}  #{municipio.estadoId.uf}" 
                                                itemValue="#{municipio}" converter="municipioConverter"
                                                style="width: 97%; height: 30px; "
                                                >
                                    <p:column style="font-size: 17px; color: blue;">
                                        #{municipio.nome}
                                    </p:column>
                                </p:autoComplete>
                            </div>
                            <div class="span6">
                                <p:messages for="msgMunicipio" showDetail="true" autoUpdate="true" closable="true" />                                
                            </div>
                        </div>

                        <div class="row-fluid" style="margin-top: 1%">                                       
                            <strong for="txtAcao" class="font-color-green">
                                Bairro:</strong>                                 
                        </div>
                        <div class="row-fluid">
                            <div class="span6">
                                <p:autoComplete id="sloBairro" 
                                                value="#{unidadeBean.unidade.bairro}" 
                                                completeMethod="#{unidadeBean.autoCompleteBairro}" 
                                                var="bairro" itemLabel="#{bairro.nome}" 
                                                itemValue="#{bairro}" converter="bairroConverter"
                                                style="width: 97%; height: 30px; color: blue;"
                                                >
                                    <p:column style="font-size: 17px; color: blue;">
                                        #{bairro.nome}
                                    </p:column>
                                </p:autoComplete>
                            </div>
                            <div class="span6">
                                <p:messages for="msgBairro" showDetail="true" autoUpdate="true" closable="true" />                                
                            </div>
                        </div>

                        <div class="row-fluid" style="margin-top: 2%">
                            <strong for="txtPopulacao" class="font-color-green">
                                Responsável: </strong> 
                        </div>
                        <div class="row-fluid">
                            <div class="span6">
                                <p:selectOneMenu id="sloResponsavel" 
                                                 style="width: 97%; color: black"
                                                 value="#{unidadeBean.unidade.responsavel}"
                                                 filter="true"
                                                 filterMatchMode="startsWith"
                                                 converter="servidorConverter"
                                                 >
                                    <f:selectItem itemLabel="Selecione o responsável" itemValue="" />
                                    <f:selectItems value="#{unidadeBean.servidores}"
                                                   var="servidor"
                                                   itemValue="#{servidor}"
                                                   itemLabel="#{servidor.nome} - #{servidor.unidade.sigla}"
                                                   class="font-color-black"
                                                   />
                                </p:selectOneMenu>
                            </div>
                            <div class="span6">
                                <p:messages for="msgResponsavel" showDetail="true" autoUpdate="true" closable="true"/>                                           
                            </div>
                        </div>

                        <div class="row-fluid" style="margin-top: 2%">                                       
                            <strong for="txtFuncao" class="font-color-green">
                                Email:</strong>                                 
                        </div>
                        <div class="row-fluid" >
                            <div class="span6">
                                <p:inputText id="txt_email" style="width: 97%; height: 30px; "
                                             value="#{unidadeBean.unidade.email}"
                                             onkeyup="alteraMinusculo(this)"
                                             maxlength="100"
                                             />                                    
                            </div>
                            <div class="span6">
                                <p:messages for="msgEmail" showDetail="true" autoUpdate="true" closable="true" />                                
                            </div>
                        </div>

                    </div>
                </div>

            </div>

        </h:form>

        <p:dialog 
            modal="true"
            widgetVar="statusDialog"
            appendTo="@(body)"
            header="Aguarde..."
            draggable="false" closable="false" resizable="false">  
            <p:graphicImage value="/resources/img/loader.gif" />  
        </p:dialog>

        <p:confirmDialog global="true"
                         closable="false" 
                         message="O Cadastro foi salvo com sucesso!"  
                         header="Alerta" severity="alert" 
                         widgetVar="save"> 
            <h:form>
                <p:commandButton  id="buttonOK" 
                                  onclick="save.hide();" 
                                  value="OK" 
                                  ajax="false"
                                  action="#{unidadeBean.irLista()}"
                                  >
                </p:commandButton> 
            </h:form>
        </p:confirmDialog>
        <p:confirmDialog 
            global="true"
            header="Confirmação"
            message="Você confirma o envio destas informações?" 
            id="confirmDialog"                               
            severity="alert" 
            widgetVar="confirmacao" 
            closable="false" 
            width="700"
            >
            <h:form id="formConfirm">
                <div class="row-fluid">                        
                    <div class="well-custom2">   
                        <div class="pull-left">
                            <div class="row-fluid">
                                <strong for="Nome" class="font-color-green">
                                    Nome<strong style="color:red">*</strong>: </strong> 
                                <h:outputText value="#{unidadeBean.unidade.nome} "/>
                            </div>
                            <div class="row-fluid"> 
                                <strong for="Sigla" class="font-color-green">
                                    Sigla:</strong> 
                                <h:outputText value="#{unidadeBean.unidade.sigla} "/>                                
                            </div>
                            <div class="row-fluid"> 
                                <strong for="CEP" class="font-color-green">
                                    CEP: </strong> 
                                <h:outputText value="#{unidadeBean.unidade.cep} "/> 
                            </div>
                            <div class="row-fluid"> 
                                <strong for="Endereco" class="font-color-green">
                                    Endereço: </strong> 
                                <h:outputText value="#{unidadeBean.unidade.endereco} "/> 
                            </div>
                            <div class="row-fluid">                                    
                                <strong for="Telefone" class="font-color-green">
                                    Telefone:<strong style="color:red">*</strong>: </strong> 
                                <h:outputText value="#{unidadeBean.unidade.telefone}" />                                 
                            </div>
                            <div class="row-fluid">                                    
                                <strong for="Telefone2" class="font-color-green">
                                    Telefone 2:<strong style="color:red">*</strong>: </strong> 
                                <h:outputText value="#{unidadeBean.unidade.telefone2}" />                                 
                            </div>
                        </div>                                                                                

                        <div class="pull-right">
                            <div class="row-fluid">                                    
                                <strong for="Estado" class="font-color-green">
                                    Estado: <strong style="color:red">*</strong>: </strong> 
                                <h:outputText value="#{unidadeBean.unidade.estado.nome} " />                                
                            </div>
                            <div class="row-fluid">                                    
                                <strong for="Municipio" class="font-color-green">
                                    Municipio: <strong style="color:red">*</strong>: </strong> 
                                <h:outputText value="#{unidadeBean.unidade.municipio.nome} " />                                
                            </div>
                            <div class="row-fluid">                                    
                                <strong for="Bairro" class="font-color-green">
                                    Bairro: </strong> 
                                <h:outputText value="#{unidadeBean.unidade.bairro.nome} " />
                            </div>
                            <div class="row-fluid">                                    
                                <strong for="Responsavel" class="font-color-green">
                                    Responsavel: </strong> 
                                <h:outputText value="#{unidadeBean.unidade.responsavel.nome} " />
                            </div>
                            <div class="row-fluid">                                    
                                <strong for="Email" class="font-color-green">
                                    Email: </strong> 
                                <h:outputText value="#{unidadeBean.unidade.email} " />
                            </div>
                        </div>

                    </div>                        
                    <div class="pull-left">   
                        <p:commandButton id="confirm" 
                                         onclick="PF('confirmacao').hide();"  
                                         value="Sim" 
                                         oncomplete="verify(args);"
                                         actionListener="#{unidadeBean.salvar()}"
                                         update=":frmCadUnidade"
                                         />                          
                        <p:commandButton id="decline" value="Não" 
                                         onclick="PF('confirmacao').hide();" 
                                         >                                         
                        </p:commandButton>
                    </div>
                </div>
            </h:form>
        </p:confirmDialog>

        <p:confirmDialog global="true"
                         closable="false" 
                         message="Endereço não encontrado para o CEP informado!"  
                         header="Alerta" severity="alert" 
                         widgetVar="errorcep"> 
            <h:form>
                <p:commandButton  id="buttonOK" 
                                  onclick="PF('errorcep').hide();" 
                                  value="OK" 
                                  ajax="false"
                                  update=":frmCadUnidade"
                                  >
                </p:commandButton> 
            </h:form>
        </p:confirmDialog>

    </ui:define>

</ui:composition>
